
<template>
    <el-container class="main-con">
        <el-container class="ui-container-talkpanel">
            <el-header class="panel-header" @mousedown="mousedown">
                <div>我是头部</div>
            </el-header>
            <div class="main-box-w">
                <div class="main">
                    <Splitpanes horizontal class="split-container">
                        <Pane size="65" min-size="30" max-size="80" class="panne-message">
                            <el-main class="no-padding lumenChatPanelBox">
                                <div id="lumenChatPanel" class="talks-container lum-scrollbar"
                                    @scroll="talkPanelScroll($event)">
                                    <div class="loading-toolbar">
                                        <span class="color-blue">
                                            <i class="el-icon-loading" /> 加载中...
                                        </span>
                                    </div>
                                    <div v-for="(item, idx) in recordsList" :key="item.id" class="ui-for">
                                        <div>{{ item.msg }}</div>
                                    </div>
                                </div>
                            </el-main>
                        </Pane>
                        <Pane size="35" min-size="20" max-size="70" class="panne-footer">
                            <!-- 页脚信息 -->
                            <el-footer class="footer-box" id="elFooter">
                                <MeEditor ref="MeEditor" @send="submitSendMesage" @keyboard-event="onKeyboardEvent"
                                    @historyShow="historyShow" />
                            </el-footer>
                        </Pane>
                    </Splitpanes>
                </div>
            </div>
        </el-container>
    </el-container>
</template>
<script>
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
import MeEditor from "../components/editor/MeEditor.vue";
import { defineComponent, reactive } from 'vue';

export default defineComponent({
    components: {
        MeEditor,
        Splitpanes,
        Pane
    },
    setup(props) {
        const recordsList = reactive([])
        recordsList.splice(0)
        //模拟1000条消息
        for (let i = 0; i < 1000; i++) {
            recordsList.push({
                id: i,
                msg: '我是消息' + i
            })
        }
        //提交消息
        const submitSendMesage = () => {

        }
        //按下回车键
        const onKeyboardEvent = () => {

        }
        //展示历史
        const historyShow = () => {

        }
        const talkPanelScroll = (e) => {

        }
        return {
            recordsList,
            submitSendMesage,
            onKeyboardEvent,
            historyShow,
            talkPanelScroll
        }
    }
})
</script>
<style lang="less" scoped>
// el-container 布局会默认有一个el-container样式
.el-container {
    height: 100%;
}

.main-con {
    width: 100%;
    height: 100%;
    min-width: 700px;
    padding: 0px;
    margin: 0px;
}

.ui-container-talkpanel {
    display: flex;
    flex-direction: column;
    height: 100%;

    .panel-header {}

    .main-box-w {
        width: 100%;
        height: calc(100% - 60px);
        display: flex;

        .main {
            display: flex;
            flex-direction: column;
            flex: 1;
            position: relative;

            .split-container {
                height: 100%;

                .panne-message {
                    height: 100%;
                    overflow: visible; // panne自带样式为hidder这里强行替换

                    .lumenChatPanelBox {
                        height: 100%;
                        .talks-container {
                            height: 100%;
                            overflow-y: scroll;

                            .loading-toolbar {
                                height: 30px;
                                line-height: 30px;
                                margin: 5px 0;
                                text-align: center;
                                user-select: none;
                                font-size: 13px;
                                color: #cec4c4;

                                .color-blue {
                                    color: #81b1e1;
                                }
                            }

                            .ui-for {}
                        }
                    }
                }

                .panne-footer {
                    
                    /* 面板页脚 390 */
                    .footer-box {
                        min-height: 200px !important;
                        padding: 0 !important;
                        border-top: 1px solid #f5f5f5;
                        box-sizing: border-box;

                        .editor-container {
                            display: flex;
                            flex: 1;

                        }
                    }
                }
            }


            .return-bottom {
                position: absolute;
                bottom: 200px;
                right: 10px;
            }



        }
    }
}
</style>